<template>
  <!--VCA设备管理-->
  <el-row style="height:100%">
    <page>
      <pageheader :event="'vacAdd'" :isShow="buttonPermissions.isAdd">
        VCA设备管理
      </pageheader>
      <div class="page-content">
        <el-card class="box-card tag-card">
          <el-row>
            <span>usn：</span>
            <el-input v-model="searches.usn" size="small" clearable placeholder="请输入usn" style="width:300px;">
              <el-button @click="deviceSearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <span style="margin-left: 20px">画线名称：</span>
            <el-input v-model="searches.zone_name" size="small" clearable placeholder="请输入画线名称" style="width:300px;">
              <el-button @click="deviceSearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-row>
          <el-row style="margin-top: 10px">
            <span>IP：</span>
            <el-input v-model="searches.ip" size="small" clearable placeholder="请输入IP" style="width:300px;">
              <el-button @click="deviceSearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <span style="margin-left:20px">是否已触发：</span>
            <el-select v-model="searches.is_trigger" @change="isTriggerChange"
                       size="small" style="width:300px">
              <el-option label="全部" value=''></el-option>
              <el-option label="是" value=1></el-option>
              <el-option label="否" value=0></el-option>
            </el-select>
          </el-row>

          <el-table :data="dataTable" size="small" stripe>
            <el-table-column label="序号" type="index" :index="indexMethod" align="center" width="60"></el-table-column>
            <el-table-column label="usn" prop="usn" align="center"></el-table-column>
            <el-table-column label="画线名称" prop="zone_name" align="center"></el-table-column>
            <el-table-column label="画线名称ID" prop="zone_id" align="center"></el-table-column>
            <el-table-column label="当前计数" prop="cur_val" align="center"></el-table-column>
            <el-table-column label="设备IP" prop="ip" align="center" width="120px"></el-table-column>
            <el-table-column label="是否已触发计数" prop="is_trigger_event" align="center" width="100px">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_trigger_event == 1" size="mini" type="success">是</el-tag>
                <el-tag v-else size="mini" type="danger">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="最后同步时间" prop="last_syn_time" align="center"></el-table-column>
            <el-table-column label="最后同步计数" prop="last_syn_val" align="center"></el-table-column>
            <el-table-column label="最后收到数据时间" prop="last_timestamp" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="100" v-if="buttonPermissions.isDelete">
              <template slot-scope="scope">
                <el-button type="danger"
                           @click="deleteDevice(scope.row)" size="small" >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background
                         layout="total,sizes,prev,pager,next"
                         @current-change="currentChange"
                         @size-change="sizeChange"
                         :page-sizes="pagination.pageSizes"
                         :page-size.sync="pagination.pageSize"
                         :total="pagination.total"
                         :current-page.sync="pagination.currentPage"
                         class="paging fr">
          </el-pagination>
        </el-card>
      </div>
    </page>
    <el-dialog v-dialogDrag title="新增VCA设备管理" :visible.sync="isShow" @close="closeDialog"
               :modal-append-to-body="false" :close-on-click-modal="false" width="800px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px">
        <el-form-item label="设备IP" prop="ip">
          <el-input v-model="ruleForm.ip" size="small" style="width:450px"></el-input>
        </el-form-item>
        <el-form-item label="设备usn" prop="usn">
          <el-input v-model="ruleForm.usn" size="small" style="width:450px"></el-input>
        </el-form-item>
        <el-form-item label="设备画线id" prop="zone_id">
          <el-input v-model="ruleForm.zone_id" size="small" style="width:450px"></el-input>
        </el-form-item>
        <el-form-item label="设备画线名称" prop="zone_name">
          <el-input v-model="ruleForm.zone_name" size="small" style="width:450px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false" size="small">取 消</el-button>
        <el-button type="primary" size="small"
                   @click="confirmDialog">保 存</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>
<style lang="scss">
  .page-content {
    .tag-card{
      >.el-card__body{
        >.el-row{
          margin-bottom: 12px;
        }
      }
    }
    padding: 15px;
    .fr {
      float: right;
    }
    .el-table {
      margin-bottom: 10px;
    }
    .paging {
      margin: 15px;
      height: 28px;
    }
    .tag-search{
      width: 40%;
      display: inline-block;
    }
    .tag-search .search-input{
      width: 300px;
      display: inline-block;
    }
    .tag-search .tag-name{
      font-size: 14px;
    }

  }

  body{
    .el-message-box__wrapper{
      .shanchuClass{
        .el-message-box__content{
          .el-message-box__message{
            p{
              max-height: 200px;
              overflow-y: auto;
              width: 100%;
              word-break:break-all;
            }
          }
        }
      }
    }
  }
  .popover{
    display: block;
    .databtn{
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis
    }
  }
  .popover-ul{
    max-height: 500px;
    overflow: auto;
    li{
      display: block;
      padding: 10px 20px
    }
  }

</style>
<script>
  let moment = require("moment");
  import page from "@/components/page/page";
  import pageheader from "@/components/page/pageheader";
  import TreeTable from "@/components/common/treeTable";
  import Cascader from "@/components/sys/assembly/elcascader";
  export default {
    data() {
      return {
        pageTitle: "VCA设备管理",
        isShow: false,//是否显示模态框
        dataTable:[],
        searches:{
          usn:'', //usn
          zone_name:'', //画线名称
          ip:'', //IP
          is_trigger:'', //是否已触发
        },//定向搜索条件

        pagination:{
          total:0,//总条目数
          currentPage:1,//当前页数
          pageSize:10,//每页显示条目个数
          pageSizes:[10,20,50,100],//每页显示个数选择器的选项设置
        },//表格分页参数

        ruleForm: {
          ip:'',
          usn:'',
          zone_id:'',
          zone_name:'',
        },//模态框form表单
        rules: {
          ip: [{ required: true, message: "请输入设备IP", trigger: "blur" }],
          usn: [{ required: true, message: "请输入设备usn", trigger: "blur" }],
          zone_id: [{ required: true, message: "请输入设备画线id", trigger: "blur" }],
          zone_name: [{ required: true, message: "请输入设备画线名称", trigger: "blur" }],
        },//form表单验证
        buttonPermissions:{
          isAdd:false,
          isDelete:false,
        },
      }
    },
    inject: ["reload"],
    components: {
      page,
      pageheader,
    },
    created() {
      this.getVCADeviceList()
      if (sessionStorage.buttonPermissions) {
        this.configPermissions(JSON.parse(sessionStorage.buttonPermissions))
      }
    },
    mounted() {
      //选择所属企业change事件
      this.$Bus.$on('vacAdd',data =>{
        this.isShow = true
      });
    },
    beforeDestroy(){
      this.$Bus.$off('vacAdd')
    },
    methods: {
      //配置按钮权限，根据权限不同调整表头渲染参数
      configPermissions(val){
        let buttonPermissions = val
        let menuButtonPermissions = [];//按钮权限数组
        buttonPermissions.forEach(e =>{
          for(let key in e){
            if(key == 'menu_code'){
              menuButtonPermissions.push(e[key])
            }
          }
        });
        this.buttonPermissions.isDelete = menuButtonPermissions.includes('isVCADevDelete') ? true : false;//删除
        this.buttonPermissions.isAdd = menuButtonPermissions.includes('isVCAAdd') ? true : false;//新增
      },
      //表格序号显示方法
      indexMethod(index){
        return index + ((this.pagination.currentPage - 1) * this.pagination.pageSize) + 1
      },
      //获取vac设备列表
      getVCADeviceList(){
        this.dataTable = [];
        let url = '/sys/vac/device/list?usn='+ this.searches.usn + '&zone_name='+ this.searches.zone_name +
          "&ip="+ this.searches.ip + '&is_trigger=' + this.searches.is_trigger +
          '&page=' + this.pagination.currentPage + '&page_size=' + this.pagination.pageSize
        this.$api.get(url)
        .then(data=>{
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            return
          }
          let _data = data.data
          if(_data){
            console.log(_data);
            this.dataTable = _data.dataList ? _data.dataList.map( x =>{
              let last_syn_time = x.last_syn_time ? String(x.last_syn_time) : ''
              x.last_syn_time = last_syn_time ? last_syn_time.substring(0,4) + '-' + last_syn_time.substring(4,6) + '-' +
                last_syn_time.substring(6,8) + ' '+ last_syn_time.substring(8,10) + ':' +
                last_syn_time.substring(10,12) + ':' + last_syn_time.substring(12,14) : ''
              x.last_timestamp = x.last_timestamp ? moment(x.last_timestamp * 1000).format("YYYY-MM-DD HH:mm") : ''
              return x
            }): [];
            this.pagination.total = _data.dataCount;
            this.pagination.currentPage = _data.pageCode;
            this.pagination.pageSize = _data.pageSize;
          }
          this.$Bus.$emit('Loading',false)
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading',false)
        })
      },
      //每页显示条目个数change事件
      sizeChange(){
        this.$Bus.$emit('Loading',true)
        this.getVCADeviceList()
      },
      //分页change事件
      currentChange(val){
        this.$Bus.$emit('Loading',true)
        this.getVCADeviceList()
      },
      //条件搜索
      deviceSearch(){
        this.getVCADeviceList()
      },
      //是否触发
      isTriggerChange(){
        this.getVCADeviceList()
      },
      //关闭模态框
      closeDialog(){
        this.$refs.ruleForm.resetFields()
        this.$Bus.$emit('Loading',false)
      },
      //保存按钮
      confirmDialog(){
        let data = {};
        let model = null;
        let url = ''
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.$Bus.$emit('Loading',true)
            model = this.$refs.ruleForm.model;
            data.ip = model.ip
            data.usn = model.usn
            data.zone_id = model.zone_id
            data.zone_name = model.zone_name
            url = "/sys/vac/device/create";
            this.$api.post(url, data)
            .then(data=>{
              if(data == '10001'){
                this.$message.error('无权操作该数据')
                this.$Bus.$emit('Loading',false);
                return
              }
              this.$Bus.$emit('Loading',false)
              if(data){
                this.isShow = false
                this.getVCADeviceList();
                this.$message({
                  message: "新增成功",
                  type: "success"
                });
              }
            })
            .catch(err=>{
               console.log(err);
              this.$Bus.$emit('Loading',false)
            })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      //删除设备
      deleteDevice(data){
        this.$confirm("是否删除设备‘"+ data.usn+'-'+data.zone_name +"’？", "提示",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center:true
        })
        .then(() => {
          this.$Bus.$emit('Loading',true)
          this.delData(data._id);
        })
        .catch(() => {
          return
        });
      },
      delData(id){
        let url='/sys/vac/device/delete?id='+id
        this.$api.delete(url)
        .then(data=>{
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          this.$Bus.$emit('Loading', true);
          this.getVCADeviceList()
          this.$message({
            message: "删除成功",
            type: "success"
          });
        })
        .catch(err=>{
          this.$Bus.$emit('Loading',false);
           console.log(err);
        })
      },
    },
    watch: {}
  }
</script>
